<template>
	<view class="" v-if="orderDetail">
		<block>
			<view class="top-wrapper">
				<!-- 待付款 -->
				<view class="order-status" v-if="orderDetail.asstatus_id">
					{{orderDetail.asstatus_id_status}}
				</view>
				<view class="order-status" v-else>
					{{orderDetail.status=='待付款'?'等待买家付款':orderDetail.status=='待发货'?'等待卖家发货':orderDetail.status=='待收货'?'卖家已发货':orderDetail.status=='完成'||orderDetail.status=='成功'?'交易成功':((orderDetail.refund&&orderDetail.refund.status=='SUCCESS')||orderDetail.status=="关闭")?"交易关闭":orderDetail.status}}
					<view v-if="orderDetail.status=='待付款'" style="color: #fff;font-size: 28rpx;">还剩{{time}}分钟自动关闭</view>
				</view>
				<!-- 待付款 -->
				<view class="inset-group" v-if="orderDetail.status=='待付款'">
					<view class="cell-wrap">
						<view class="address-wrapper">
							<image src="//qoxa.antweb.cn/hippoShop/uniShop/static/images/location.png" mode="widthFix"></image>
							<view class="address-info">
								<view>
									<text class="name">{{orderDetail.name}}</text>
									<text class="phone">{{orderDetail.phone}}</text>
								</view>
								<view class="desc">{{orderDetail.addr}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 交易关闭 -->
				<view v-if="!orderDetail.asstatus_id">
					<view class="inset-group" v-if="orderDetail.status=='待发货'||orderDetail.status == '关闭'||orderDetail.status=='待收货'||orderDetail.refund&&orderDetail.refund.status=='SUCCESS'">
						<view class="cell-wrap">
							<view class="address-wrapper">
								<image :src="orderDetail.pic+'_80x80q100.jpg_.webp'" mode="widthFix"></image>
								<view class="address-info">								
									<view>
										<text class="name">{{orderDetail.status=='待发货'?'付款成功，请耐心等待发货':orderDetail.status=='待收货'?'宝贝在路上':'交易已关闭'}}</text>
										<view class="phone" :style="orderDetail.status=='待发货'?'color:#fa7f3f':''">{{orderDetail.status=='待发货'?'商家会在72小时内发货':orderDetail.status=='待收货'?'':'再逛逛下一件一定是缘分的...'}}</view>
									</view>
								</view>
								<view class="btn" @click="logistics" v-if="orderDetail.status=='待收货'&&!orderDetail.asstatus_id">
									查看物流
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 待发货 -->
				<view class="inset-group" v-if="orderDetail.status == '完成'||orderDetail.status == '成功'">
					<view class="cell-wrap">
						<view class="address-wrapper" style="justify-content: space-between;">
							<image :src="orderDetail.pic+'_80x80q100.jpg_.webp'" mode="widthFix"></image>
							<view class="address-info">
								<view>
									<text class="name" style="font-weight: bold;">交易成功</text>
									<view class="phone">感谢您的购物</view>
								</view>
							</view>
							<view class="btn" @click="logistics">
								查看物流
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods-info">
				<!-- <view class=" inset-group"> -->
					<view class="top-desc">
						<image :src="orderDetail.pic+'_100x100q100.jpg_.webp'" mode="widthFix"></image>
						<view class="center-desc">
							<text class="title line2">{{orderDetail.goods_title}}</text>
							<view class="tag">{{orderDetail.goods_skuname}}</view>
							<view class="price">
								<view class="p-l">
									<text class="price-txt">￥{{orderDetail.goods_payprice/100}}</text>
									<text class="old-p">￥{{orderDetail.goods_rawprice/100}}</text>
								</view>
								
								<text class="num">x{{orderDetail.count}}</text>
							</view>
						</view>
						<!-- <view class="right-desc">
							<view class="price">
								￥{{orderDetail.goods_payprice/100}}
							</view>
							<view class="num">
								x{{orderDetail.count}}
							</view>
						</view> -->
					</view>
					<view class="bottom-info">	
						<view class="btn-group">
							<view class="btn" v-if="!orderDetail.asstatus_id&&orderDetail.status=='待发货'" @click="postMsg">
								提醒发货
							</view>
							<view class="btn" v-if="!orderDetail.asstatus_id&&(orderDetail.status=='待发货'||orderDetail.status=='待收货'||orderDetail.status=='成功')" @click="returnPrice">
								申请退款
							</view>
						</view>
						<view class="btn-group" v-if="orderDetail.asstatus_id">
							<view class="btn" @click="seeOrderStatus">
								{{(orderDetail.refund&&orderDetail.refund.status)=='SUCCESS'?'退款成功':'查看进度'}}
							</view>
						</view>
						
						<!-- <view class="cell-wrap">
							<view class="pay-num">
							  <text class="u-cell-text">商品总价</text>
							  <view>
								￥{{orderDetail.total_rawprice/100}}
							  </view>
							</view>
						</view>
						<view class="cell-wrap">
							<view class="pay-num">
							  <text class="u-cell-text">购物红包</text>
							  <view style="color: #ff4c02;font-weight: bold;">
								-￥{{(orderDetail.total_rawprice-orderDetail.total_payprice)/100}}
							  </view>
							</view>
						</view> -->
						<!-- <view class="cell-wrap">
							<view class="pay-num">
							  <text class="u-cell-text">运费</text>
							  <view>
								￥{{orderDetail.exp_price/100}}
							  </view>
							</view>
						</view>	 -->			
						<!-- <view class="cell-wrap">
						  <view class="bottom-money">
							<view class="u-cell-text">实付款</view>
							<view>￥<text>{{(orderDetail.total_payprice)/100}}</text></view>
						  </view>
						</view> -->
					</view>
				<!-- </view>				 -->
			</view>
			
			<view class="red-pkg" @click="goHome">
				<image src="//cdn.chilli.red/hippoShop/uniShop3/static/images/20210914200210083976.png" mode="widthFix"></image>
			</view>
			
			<view class="order-info">
				<!-- <view class="inset-group"> -->
					<view class="title">
						订单信息
					</view>
					<view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">收货信息</text>
						  <view>{{orderDetail.name}},{{orderDetail.phone}},{{orderDetail.addr}}</view>
						</view>
					</view>	
					<view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">订单编号</text>
						  <view>{{orderDetail.order_id}}<text @click="copy" style="color: #db592a;margin-left: 20rpx;">复制</text></view>
						</view>
					</view>	
					<view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">下单时间</text>
						  <view>{{orderDetail.create_time}}</view>
						</view>
					</view>
					<!-- <view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">运费:</text>
						  <view>￥{{orderDetail.exp_price/100}}</view>
						</view>
					</view> -->
					<!-- <view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">支付金额:</text>
						  <view class="price">￥<text>{{(orderDetail.total_payprice)/100}}</text></view>
						</view>
					</view>
					<view class="cell-wrap">
						<view class="order-beizhu">
						  <text class="u-cell-text">订单状态:</text>
						  <view>{{orderDetail.status}}</view>
						</view>
					</view> -->
					<view class="kefu" @click="kefu">
						<uni-icons type="chatboxes" color="#0070ff" size="28" style="margin-right: 10rpx;"></uni-icons>订单有问题？请联系客服
					</view>
				<!-- </view> -->
			</view>
			
			<view class="pay-btn" v-if="orderDetail.status=='待付款'">
				<view class="btn" @click="pay">
					付款
				</view>
			</view>
		</block>
		<block v-if="isempty">
			<empty description="暂无该订单"></empty>
			<view class="no-btn" @click="goHome">去逛逛</view>
		</block>
		<!-- <pay-cancel :order="orderDetail" :orderId="orderDetail.order_id+''" :status="status" :appid="appId" v-if="status"></pay-cancel>
		<pay :show="selPayType" @close="closePatType" :data="{order_id:orderDetail.order_id+''}" v-if="selPayType" :ptype="payType"></pay> -->
	</view>
</template>

<script>
	import api from "@/api/api.js"
	export default {
		data() {
			return {
				orderStatus:3,
				orderDetail: null,
				timeData: {},
				time:"",
				timer:null,
				options:{},
				isempty:false,
				flag:true,
				// status:false,
				// selPayType:false,
				// payType:app.globalData.pay_chn,
			}
		},
		onLoad(options) {
			this.options = options;	
		},
		computed:{
			isWX(){
				return this.$store.getters.isWX
			}
		},
		onShow() {
			let options = this.options;
			if(options.orderid){
				// this.getDetail(options.orderid)
			}else{
				this.isempty=true;
			}
		},
		onHide(){
			clearInterval(this.timer)
		},
		onUnload(){
			clearInterval(this.timer)
		},
		methods: {
			goHome(){
				this.$uniGo('switchTab',{
					url:"/pages/home/home"
				})
				// uni.switchTab({
				// 	url:"/pages/home/home"
				// })
			},
			closePatType(type){
				this.selPayType = false;
				this.flag = true;
			},	
			getDetail(orderId){
				uni.showLoading()
				api.getOrderDetail({
					order_id:orderId
				}).then((res)=>{
					if(res.status==0){
						this.orderDetail = res.data.order						
						this.initTime();
						this.$store.commit("setOrderDetail",this.orderDetail)
					}else{
						this.isempty=true
					}
					uni.hideLoading()
				})
			},
			initTime(){
				if(this.orderDetail.status=="待付款"){
					this.timer = setInterval(()=>{
						let create_time = new   Date(Date.parse(this.orderDetail.create_time.replace(/-/g,   "/")))
						let time = (30*60*1000)-(new Date().getTime()-create_time.getTime());
						if(!this.isWeixin){
							time = (5*60*1000)-(new Date().getTime()-create_time.getTime());
						}
						if(time>0){
							this.time = this.timeConversion(time)
						}else{
							this.orderDetail.status = "关闭"
							clearInterval(this.timer);
						}
					},1000)
				}
			},
			timeConversion(duration) {		
				var milliseconds = parseInt((duration%1000)/100)
			        , seconds = parseInt((duration/1000)%60)
			        , minutes = parseInt((duration/(1000*60))%60)
			        , hours = parseInt((duration/(1000*60*60))%24);
			
			    hours = (hours < 10) ? "0" + hours : hours;
			    minutes = (minutes < 10) ? "0" + minutes : minutes;
			    seconds = (seconds < 10) ? "0" + seconds : seconds;
			    return minutes + ":" + seconds;
			},
			// 退款
			returnPrice(){
				this.$uniGo('navigateTo',{
					url:"money-back?order_id="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				})
				// uni.navigateTo({
				// 	url:"money-back?order_id="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				// })
			},
			// 查看售后进度
			seeOrderStatus(){
				this.$uniGo('navigateTo',{
					url:"refund-status?order_id="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				})
				// uni.navigateTo({
				// 	url:"refund-status?order_id="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				// })
			},
			// 提醒发货
			postMsg(){
				uni.showToast({
					title:"已提醒商家"
				})				
			},
			kefu(){
				const userInfo = this.$store.state.userInfo;
				this.$uniGo('navigateTo',{
					url:"../kefu/kefu?u_cust_id="+(userInfo.userid?userInfo.userid:this.orderDetail.order_id)+"&u_cust_name=订单-"+this.orderDetail.order_id+'-'+(userInfo.userid?userInfo.userid:"sms")+"-"+this.orderDetail.goods_title+"&u_custom_info=订单信息"
				})
				// uni.navigateTo({
				// 	url:"../kefu/kefu?u_cust_id="+(userInfo.userid?userInfo.userid:this.orderDetail.order_id)+"&u_cust_name=订单-"+this.orderDetail.order_id+'-'+(userInfo.userid?userInfo.userid:"sms")+"-"+this.orderDetail.goods_title+"&u_custom_info=订单信息"
				// })
			},
			pay(){				
				console.log("支付")	
				this.$uniGo('navigateTo',{
					url:"/pages/order/order?order_id="+this.orderDetail.order_id
				})
				// uni.navigateTo({
				// 	url:"/pages/order/order"
				// })
			},
			logistics(){
				this.$uniGo('navigateTo',{
					url:"logistics?orderid="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				})
				// uni.navigateTo({
				// 	url:"logistics?orderid="+this.orderDetail.order_id+"&openid="+this.orderDetail.openid
				// })
				
			},
			copy(){
				uni.setClipboardData({
				  data: this.orderDetail.order_id+'',
				  success (res) {
					  uni.showToast({
					  	title:"复制成功"
					  })
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inset-group{
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
	}
	.top-wrapper{
		padding: 30rpx 20rpx 1rpx;
		background: $theme-color;
		// margin-bottom: 80rpx;
		.order-status{
			color: #fff;
			text-align: center;
			font-size: 36rpx;
			padding-bottom: 30rpx;
			// margin-top: 20rpx;
			font-weight: bold;
			text{
				display: block;
				font-size: 28rpx;
				// line-height: 2;
			}
		}
		.inset-group{
			// position: relative;
			// top: 50rpx;
			font-size: 28rpx;
			font-weight: bold;
			// color: #333;
		}
	}
	.btn-group{
		display: flex;
		flex-direction: row-reverse;
		text-align: right;
		margin: 40rpx 0 20rpx;
	}
	.address-wrapper{
		display: flex;
		align-items: center;
		image{
			width: 80rpx;
			min-width: 80rpx;
			max-width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.address-info{
			// font-size: 24rpx;
			flex: 1;
			.name{
				font-size: 30rpx;
				// font-weight: bold;
				margin-right: 15rpx;
				margin-bottom: 10rpx;				
			}
			.phone{
				color: #aeaeae;
				
			}
			.desc{
				line-height: 1.5;
			}
			::v-deep .u-button{
				height: 20px;
			}
		}
		::v-deep .u-button{
			width: 160rpx;
		}
	}
	.goods-info{
		font-size: 28rpx;
		margin-top: 20rpx;
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		// margin: 20rpx;
		// border-radius: 10rpx;
		.top-desc{
			display: flex;
			// justify-content: space-between;
			// margin: 20rpx 30rpx;
			image{
				width: 180rpx;
				min-width: 180rpx;
				max-width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
			.center-desc{
				// margin: 0 50rpx 0 30rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;
				.title{
					// display: block;
					// height: 80rpx;
					// line-height: 40rpx;
					
					font-weight: bold;
				}
				.price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price-txt{
						font-weight: bold;
						color:$theme-color ;
						font-size: 32rpx;
					}
					.old-p{
						color: #999;
						text-decoration: line-through;
						font-size: 24rpx;
						margin: 0 20rpx;
					}
				}
				.tag{
					display: block;
					margin: 10rpx 0;
					color: #999;
				}
			}
			.right-desc{
				text-align: right;
				.num{
					font-size: 24rpx;
					color: #969799;
				}
			}
		}
		.bottom-info{
			.pay-num{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.cell-wrap{
				margin: 40rpx 0 40rpx 20rpx;
			}
			.order-beizhu{
				display: flex;
				align-items: center;
				input{
					flex: 1;
					margin-left: 20rpx;
				}
			}
			::v-deep .u-tag{
				border: 1rpx #ff6f7b solid;
				padding: 0 8rpx;
				margin-left: 20rpx;
			}
			.right-text,
			::v-deep .u-cell__value{
				color: #000;
			}
			.bottom-money{
				text-align: right;
				view{
					display: inline-block;
					&:last-of-type{												font-size: 22rpx;
						color: #ff4c02;
					}
					text{
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
	.order-info{
		background: #fff;
		padding-bottom: 120rpx;
		padding: 30rpx;
		.title{
			font-size: 32rpx;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx #eee solid;
			position: relative;
			font-weight: bold;
			&::after{
				content: "";
				position: absolute;
				top: 38rpx;
				left: 10rpx;
				width: 10rpx;
				height: calc(100% - 70rpx);
				background: $theme-color;
				border-radius: 5rpx;
			}
		}
		.cell-wrap{
			margin: 50rpx 0 50rpx 20rpx;
		}
		.order-beizhu{
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			text{
				width: 5em;
				min-width: 5em;
				max-width: 5em;
			}
			view{
				font-size: 24rpx;
			}
			.price{
				color: $theme-color;
			}
		}
		// .u-cell-text{
		// 	color: #999;
		// }
		.kefu{
			text-align: center;
			font-size: 40rpx;
			// font-weight: bold;
			border-top: 1rpx #eee solid;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			color: #0070ff;
			position: relative;
			overflow: hidden;
			.ali-kefu{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left:0;
				opacity: 0.01;
			}
		}
	}
	.red-pkg{
		padding: 0 20rpx;
		image{
			width: 100%;
			height: auto;			
		}
	}
	.pay-btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 50rpx;
		background: #fff;
		box-sizing: border-box;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		z-index: 9999;
		.btn{
			border-radius: 60rpx;
			background: $theme-color;
			color: #fff;
			border: none;
			font-weight: bold;
			padding: 0 40rpx;
		}
	}
	.no-btn{
		width: 50%;
		margin: 30rpx auto;
	}
	.btn{
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx #737373 solid;
		color: #737373;
		padding: 0 20rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}
	
</style>